<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例</title>
	<!-- 包含头部信息用于适应不同设备 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 包含 bootstrap 样式表 -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
  </head>

  <body>
	  


	  <div class="container">


		  <!--模态框 开始-->
		  <!-- Modal -->
		  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
		    <div class="modal-dialog" role="document">
		      <div class="modal-content">
		        <div class="modal-header">
		          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		          <h4 class="modal-title" id="myModalLabel">角色新增</h4>
		        </div>
		        <div class="modal-body">
						
						<form class="form-horizontal">
						  <div class="form-group">
						    <label for="inputEmail3" class="col-sm-2 control-label">角色名称</label>
						    <div class="col-sm-10">
						      <input type="text" class="form-control" id="inputEmail3" placeholder="角色名称">
						    </div>
						  </div>
						  <div class="form-group">
						    <label for="inputPassword3" class="col-sm-2 control-label">角色描述</label>
						    <div class="col-sm-10">
						      <input type="text" class="form-control" id="inputPassword3" placeholder="角色描述">
						    </div>
						  </div>
						</form>
				
					
		        
		        </div>
		        <div class="modal-footer">
		          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		          <button type="button" class="btn btn-primary">提交</button>
		        </div>
		      </div>
		    </div>
		  </div>
		  <!--模态框 结束-->
		  
		  <div class="row">
			  <div class="col-md-1">
				  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">新增</button>
			  </div>
			  <div class="col-md-1">
				  <button type="button" class="btn btn-danger">删除</button>
			  </div>
		  </div>

		  <table class="table table-hover" id="scott">
			  <tr>
				  <th>#</th>
				  <th>角色名称</th>
				  <th>角色描述</th>
				  <th>操作</th>
			  </tr>
		  </table>
	  </div>
	  
	  
	  
	  <script src="js/jquery-2.1.1.min.js"></script>
	  <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
	  <script src="js/bootstrap.min.js"></script>
	  <script src="js/ajax.js"></script>
	  
	  <script>
	  
			$(function(){
				
				//发送ajax请求拿到所有的角色
				var url="http://localhost:8080/kaoqin/role/findAll.do";
				sendGet(url,function(dataR){
					
					console.log(dataR);
					var body= $('#scott');
					var roles=dataR.data;
					for(var index=0; index<roles.length;index++){
						var tr= $('<tr></tr>');
						var role=roles[index];

						var roleId=role.id;
						var tdId= $('<td></td>');
						tdId.append(roleId);
						tdId.appendTo(tr);

						var roleName=role.name;
						var td= $('<td></td>');
						td.append(roleName);
						td.appendTo(tr);

						var roleDesc=role.roleDesc;
						var roleDescTd= $('<td></td>');
						roleDescTd.append(roleDesc);
						roleDescTd.appendTo(tr);

						$('<td><button type="button" class="btn btn-primary">修改</button> &nbsp;&nbsp; <button type="button" class="btn btn-danger">删除</button></td>').appendTo(tr);
						tr.appendTo(body);
					}

				});
				
				
			});
	  
	  </script>
  </body>

</html>
